<!--
 * @Author: fengxx
 * @Date: 2025-09-05 09:19:27
 * @LastEditors: fengxx
 * @LastEditTime: 2025-10-11 10:44:22
-->
<script setup lang="ts">
import { onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { useRoute, useRouter } from 'vue-router'

onMounted(() => {
  const myChart = echarts.init(document.getElementById('pieChart'))
  // 绘制图表
  myChart.setOption({
    title: {
      text: '面积图',
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {},
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['student', 'student1'],
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: 'student',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        // areaStyle: {},
      },
      {
        name: 'student1',
        data: [77, 932, 778, 566, 1290, 1330, 123],
        type: 'line',
        // areaStyle: {},
      },
    ],
  })
  // echarts 随着窗口大小的变化而变化
  window.onresize = function () {
    myChart.resize()
  }
})

const router = useRouter()
const route = useRoute()

// 定义的是routerView传递的参数
// const props = defineProps({
//   aboutId: Array,
// })

watch(
  () => route.params.id,
  (newId, oldId) => {
    console.log(newId, oldId)
    // 对路由变化做出响应...
  },
)

const jump = () => {
  // console.log(router)
  // 路由跳转js语法(push：在当前路由栈增加一个路由，支持返回；replace： 替换路由栈中的当前路由，不支持返回)
  // template中router-link的to语法和push参数以及replace参数语法一致
  // 在对象中需要传参必须通过name实现路由跳转
  // push方法的传参类型：1.路径字符串；2.对象（属性包含path、name、params、query）；如果提供了path， params会被忽略，
  router.push('/test/1?aboutId=9&aboutName=about')
  // router.push('/userList/1');
  // router.push({
  //   path: '/userList/1',
  //   // params: { userId: 1 },
  //   query: {
  //     userName: '小明',
  //   },
  // })
  router.push({
    name: 'userList',
    // 动态传参(需要在路由表中先定义)
    params: {
      userId: 1,
    },
    // 路径上?以后得参数
    query: {
      aboutId: 9,
      aboutName: 'about',
    },
    // replace: true,// 替换当前路由
  })
  // router.replace({
  //   name: 'userList',
  //   // 动态传参(需要在路由表中先定义)
  //   params: {
  //     userId: 1,
  //   },
  //   // 路径上?以后得参数
  //   query: {
  //     aboutId: 9,
  //     aboutName: 'about',
  //   },
  // })
  // 等同于router.back()  返回上一个路由
  // router.go(-1)
  // 等同于router.forward()  前进一层路由
  // router.go(1)
  // 如果没有那么多记录，静默失败
  // router.go(-100)
  // router.go(100)
}
</script>
<template>
  <!-- <div>{{ props.aboutId }}{{ $route.params.aboutId }}</div> -->
  <div class="about">
    <!-- <router-link :to="$router.resolve({ name: 'about', params: { aboutId: [1, 2] } }).href"
      >跳转</router-link
    > -->
    <router-link to="/test" replace>rrrr</router-link>
    <!-- <router-link :to="{ name: 'test', params: { userId: 1 }, query: { test: 'ki' } }"
      >链接跳转</router-link
    > -->
    <button @click="jump">按钮跳转</button>
    <button
      @click="
        () => {
          $router.replace({
            name: 'userList',
            // 动态传参
            params: {
              userId: 1,
            },
          })
        }
      "
    >
      按钮跳转1
    </button>
    <h1>This is an about page</h1>
    <!-- canvas容器初始化之前需要设置传告 -->
    <div id="pieChart" style="width: 100%; height: 300px"></div>
  </div>
</template>

<style>
.about {
  width: 100%;
}
/* @media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
} */
</style>
